<!--
 * @Description: Description
 * @Author: Kerwin
 * @Date: 2025-04-25 12:05:08
 * @LastEditTime: 2025-04-25 16:34:20
 * @LastEditors:  Please set LastEditors
-->
<template>
    <view>
        <van-cell-group>
            <van-cell @click="show = true" :title="shopList[currentIndex]?.name" icon="shop-o" size="large" value="选择门店"
                is-link />
        </van-cell-group>
        <view class="card-box">
            <view class="card-item" v-for="(cardItem, index) in cardData" :key="index">
                <view class="vanBox">
                    <van-row class="vantCol" justify="center" v-for="(item, index) in cardItem.cardTitle" :key="index">
                        <van-col class="vantColTitle" span="8">{{ item.name }}:</van-col>
                        <van-col class="vantColTitle2" span="14"
                            :class="{ 'red-text': item.name === '排队金额' || item.name === '当前排名' || item.name === '已提现金额' || item.name === '未提现金额' }">{{
                                item.value }}</van-col>
                        <van-col span="2"></van-col>
                        <!-- <van-col  class="vantColTitle3" span="6">span: 6</van-col> -->
                    </van-row>
                </view>
                <view style="padding: 20rpx;font-weight: 700;">{{ (cardItem.status == 20 || cardItem.status == 21) ?
                    '已完成'
                    : cardItem.status == 10 ? '审批中' : cardItem.status == 0 ? '排队中' : '' }}</view>


                <u-button class="btn" @click="clickIntegral(cardItem)" type="primary" size="mini">兑换为积分</u-button>

            </view>

        </view>

        <u-popup v-model="show" mode="bottom" border-radius="24" height="170px">
            <view class="itemSY" :class="{ active: index == currentIndex }" @click="changeList(item, index)"
                v-for="(item, index) in shopList">{{ item.name }}</view>
        </u-popup>
        <u-back-top :scroll-top="scrollTop"></u-back-top>

        <!-- 兑换积分 -->
        <van-dialog @confirm="handleConfirm" @cancel="handleCancel" v-model:show="dialog" title="温馨提示" show-cancel-button
            confirmButtonColor="#ff0000">
            <view style="padding: 40rpx;">转换为积分后，将无法撤销，确认转换？</view>
        </van-dialog>
    </view>
</template>

<script setup lang="ts">
import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app'
import { ref } from 'vue'
//api
import moneyApi from '@/api/modules/money';
import { useUserStore, useConfigStore } from '@/store'
//工具
import { dateFormat } from '@/utils/index'



//初始化数据
const userStore = useUserStore()
const shopName = ref<any>('')
const cardData = ref<any>([])
const shopList = ref<any>([])
const show = ref(false)
const currentIndex = ref(0)
const selectShopId = ref(1221)
const scrollTop = ref(0)
const dialog = ref(false)
const ids = ref<any>([])//兑换积分数组
//页面加载
onLoad(() => {
    getShopList()



})
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
})
//获取门店列表
const getShopList = async () => {
    const { data } = await moneyApi.queueShopList({
        noPaging: true,
        userId: userStore.userInfo?.id,
    })
    if (data.length > 0) {
        shopList.value = data
        selectShopId.value = data[0].id
        getShopIntegral(selectShopId.value)
    }
}

//获取卡片详情
const getShopIntegral = async (shopId: any) => {
    const { data } = await moneyApi.queueList({
        noPaging: true,
        detail: true,
        shopId: shopId,
        userId: userStore.userInfo?.id,
        status: 0,
    })
    if (data && data.length > 0) {
        cardData.value = data.sort((a: any, b: any) => b.queueLevel - a.queueLevel).map((item: any) => {
            // 确保 item.user 存在
            const userPhone = item.user?.phone || '暂无';
            const userNickname = item.user?.nickname || '暂无';
            return {
                ...item,
                cardTitle: [
                    { name: '消费门店', value: item.shop.name },
                    { name: '排队门店', value: item.fromShop.name },
                    { name: '用户电话', value: userPhone },
                    { name: '用户昵称', value: userNickname },
                    { name: '流水号', value: item.serialNo },
                    { name: '排队金额', value: `￥${parseFloat(item.originalMoney).toFixed(5)}` },
                    { name: '已提现金额', value: `￥${(item.originalMoney - item.money).toFixed(2)}` },
                    { name: '未提现金额', value: `￥${parseFloat(item.money).toFixed(5)}` },
                    { name: '当前排名', value: item.queueLevel },
                    { name: '消费时间', value: dateFormat(new Date(item.createTime * 1000), 'yyyy-MM-dd hh:mm:ss') }
                ]
            }
        })

    } else {
        cardData.value.forEach((item: any) => {
            item.cardTitle = []
        })
    }
}

//切换门店
const changeList = (item: any, index: any) => {
    currentIndex.value = index;
    selectShopId.value = item.id;
    getShopIntegral(item.id)
    show.value = false;
};

//兑换积分
const clickIntegral = (item:any) => {
    console.log(item,'兑换积分吗')
    dialog.value = true
    ids.value.push(item.id)

}
//确认兑换
const handleConfirm = async () => {
    const { code } = await moneyApi.batchTransferToMoneyScoreForIos({
        ids: ids.value,

    })

    if(code == 200) {
 
        getShopIntegral(selectShopId.value)
        dialog.value = false
        uni.showToast({
            title: '兑换成功',
            icon: 'none'
        })
    }
}
//取消兑换
const handleCancel = () => {
    dialog.value = false
    ids.value = []
}

</script>

<style lang="scss" scoped>
.card-box {
    padding: 30rpx;

}

.btn {
    position: absolute;
    right: 10rpx;
    bottom: 20rpx;
}

.card-item {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 20rpx 0;
    // padding: 30rpx;
    border-radius: 20rpx;
    background-color: #fff;

    .vanBox {
        flex: 1;
        // background-color: pink;
    }

    .vantCol {
        margin: 20rpx;
    }

    .vantColTitle {
        color: #000;
        font-weight: 700;
        font-size: 28rpx;
    }

    .vantColTitle2 {
        color: #9c9c9c;
    }

    .red-text {
        color: red;
    }
}


.itemSY {
    height: 100rpx;
    line-height: 100rpx;
    border-bottom: 5rpx solid #fff;
    text-align: center;
    background-color: #f9f9f9;
}

.active {
    color: #fff;
    background-color: #f28b54;
}
</style>